// 封装函数调用组件
// Message({ type: 'error', text: '登录失败' }) // 错误弹框提示 文案为登录失败
import { createVNode, render } from 'vue'
import _Message from './index.vue'
function Message ({ type, text }) {
  // 核心逻辑
  // 1. 使用createVNode把准备好的Message组件变成VNode
  const VNode = createVNode(
    _Message,
    // 给组件传递props 之前给组件传参是<Message type="xxx"/>
    {
      type,
      text
    }
  )
  // 2. 准备一个目标挂载节点 container
  // 动态生成
  const container = document.createElement('div')
  document.body.appendChild(container)
  // 3. 使用render方法传入VNode + container 渲染成真实的dom
  render(VNode, container)

  // 4. 1.5s之后移除
  setTimeout(() => {
    // 把container中的容器移出掉
    render(null, container)
  }, 1500)
}

export default Message

/**
 * 函数式组件
 * 1. createVNode / render  (vue3底层的api开放了出来供开发者开发一些高阶组件)
 * 2. 函数式组件好处 - 灵活性高  不跟随通常组件跟随vue模板渲染 人工控制的
 * 3. 简历亮点 [有没有在业务中自己开发组件？？？ 面板组件-插槽+props  数量组件-v-model  函数式组件]
 */
